<template>
  <div style="padding: 15px;">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item
              label="盘点单号"
              style="margin-right: 15px"
              label-width="120px"
            >
              <el-input
                disabled
                v-model="form.code"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item
              label="所属仓库"
              style="margin-right: 15px"
              label-width="120px"
            >
              <el-input
                disabled
                v-model="form.warehouseName"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item
              label="盘点类型"
              style="margin-right: 15px"
              label-width="120px"
            >
              <el-input
                disabled
                v-model="form.type"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div v-if="showShipment" class="grid-content bg-purple">
            <el-form-item
              label="入驻商"
              style="margin-right: 15px"
              label-width="120px"
            >
              <el-input
                disabled
                v-model="form.shipmentName"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div v-if="showLocation" class="grid-content bg-purple">
            <el-form-item
              label="库位"
              style="margin-right: 15px"
              label-width="120px"
            >
              <el-input
                disabled
                v-model="form.locationName"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div v-if="showOpQuantity" class="grid-content bg-purple">
            <el-form-item
              label="动碰次数"
              style="margin-right: 15px"
              label-width="120px"
              prop="opQuantity"
            >
              <el-input
                v-model="form.opQuantity"
                placeholder="动碰次数"
                style="width: 100%"
                disabled
                @blur="blurOpQuantity"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item
              label="监盘人"
              style="margin-right: 15px"
              label-width="120px"
            >
              <el-input
                v-model="form.supervisor"
                placeholder="监盘人"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-form-item
              label="备注"
              style="margin-right: 15px"
              label-width="120px"
            >
              <el-input
                v-model="form.remarks"
                placeholder="备注"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="500"
      :loading="loading"
      :data="tableData"
    >
      <template v-slot:empty>
        <p>暂无数据！</p>
      </template>
      <vxe-table-column type="seq" width="60" fixed="left" />
      <vxe-table-column
        field="warehouseSpaceName"
        title="库区"
        min-width="100"
      />
      <vxe-table-column field="locationName" title="库位" min-width="100" />
      <vxe-table-column field="shipmentName" title="入驻商" min-width="100" />
      <vxe-table-column field="goodsName" title="商品名称" min-width="100" />
      <vxe-table-column field="goodCode" title="商品编码" min-width="100" />
      <vxe-table-column field="goodsBarCode" title="商品条码" min-width="100" />
      <vxe-table-column field="goodsUnitName" title="单位" min-width="100" />
      <vxe-table-column field="inventoryQuantity" title="库存数量" min-width="100" />
      <vxe-table-column field="countingQuantity" title="盘点数量" min-width="100"/>
      <vxe-table-column field="status" title="盘点状态" min-width="120"  :edit-render="{name: '$select', options: statusData,props: {disabled: true}}"/>
      <vxe-table-column
        field="gmtManufacture"
        title="生产日期"
        min-width="150"
      />
      <vxe-table-column field="gmtExpire" title="过期日期" min-width="150" />
      <vxe-table-column field="gmtStock" title="存货日期" min-width="150" />
      <vxe-table-column field="receiveLot" title="收货批次" min-width="100" />
      <vxe-table-column
        field="goodsStatusName"
        title="库存状态"
        min-width="100"
      />
      <vxe-table-column
        field="isLock"
        title="锁定状态"
        min-width="100"
        :formatter="formatterLock"
      />
      <vxe-table-column field="supplier" title="供应商" width="120"/>
      <vxe-table-column field="serialNumber" title="序列号" width="120"/>
      <vxe-table-column field="extendOne" title="生产批号" width="120"/>
      <vxe-table-column field="extendTwo" title="商品批次" width="120"/>
      <vxe-table-column field="extendThree" title="扩展3" width="120"/>
      <vxe-table-column field="extendFour" title="扩展4" width="120"/>
      <vxe-table-column field="extendFive" title="扩展5" width="120"/>
      <vxe-table-column field="extendSix" title="扩展6" width="120"/>

    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import request from "@/utils/request";
import { countingEdit, countingDetail, countingDetailList } from "@/api/store";

Vue.use(VXETable);
export default {
  data() {
    return {
      isDisable: false, //确定键显示按钮
      tableData: [],
      showShipment: false,
      showLocation: false,
      showOpQuantity: false,
      warehouseData: [], //仓库列表
      shipmentData: [],
      locationData: [],
      //盘点类型列表
      countingTypeData: [
        { code: "0", name: "全盘" },
        { code: "1", name: "入驻商盘点" },
        { code: "2", name: "库位盘点" },
        { code: "3", name: "动碰盘点" },
      ],
      statusData: [
        { value: "0", label: "新增" },
        { value: "1", label: "待盘点" },
        { value: "2", label: "盘点中" },
        { value: "3", label: "待审核" },
        { value: "4", label: "已审核" },
        { value: "5", label: "作废" },
      ],

      form: {
        code: "", //数据标识 ,
        name: "", //库位名称 ,
        remarks: "", //备注 ,
        status: "", //状态 ,
        total: "", //总数 ,
        warehouseCode: "", //所属仓库
        supervisor: "",
        opQuantity: "",
        shipmentCode: "",
        shipmentName: "",
        location: "",
        locationName: "",
        warehouseName: "",
        type: "",
        countingItemList: [],
      },
      loading: false,
      rules: {
        warehouseCode: [
          { required: true, message: "请选择仓库", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择盘点类型", trigger: "blur" }],
        shipmentCode: [
          { required: true, message: "请选择入驻商", trigger: "blur" },
        ],
        location: [{ required: true, message: "请选择库位", trigger: "blur" }],
        opQuantity: [
          { required: true, message: "请输入动碰次数", trigger: "blur" },
        ],
      },
      listQuery: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
          code: this.$route.query.code
        },
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    // 返回
    funcSubmitCheck() {
      this.$eventBus.$emit('refreshList')
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/kngl/counting",
      });
    },
      // 分页handle
      handlePageChange({ currentPage, pageSize }) {
        this.listQuery.pageNum = currentPage
        this.listQuery.pageSize = pageSize
        this.getInfo()
      },
    // 获取页面信息
    getInfo() {
      this.loading = true;status
      let code = this.$route.query.code ? this.$route.query.code : "";
      let status = this.$route.query.status ? this.$route.query.status : "";
      if(status !== '0'){
        countingDetailList(this.listQuery).then(response => {
          // this.form = response.data,
          // this.tableData = this.form.countingRegisterList;
          this.form = response.data

          this.tableData = response.data.returnPage.records
          this.listQuery.total = response.data.returnPage.total

          if(this.form.type === '0') {
            this.showShipment = false;
            this.showLocation = false;
            this.showOpQuantity = false;
            this.form.type = "全盘";
          }
          if(this.form.type === '1') {
            this.showShipment = true;
            this.showLocation = false;
            this.showOpQuantity = false;
            this.form.type = "入驻商盘点";
          }
          if(this.form.type === '2') {
            this.showLocation = true;
            this.showShipment = false;
            this.showOpQuantity = false;
            this.form.type = "库位盘点";
          }
          if(this.form.type == 3) {
            this.showOpQuantity = true;
            this.showLocation = false;
            this.showShipment = false;
            this.form.type = "动碰盘点";
          }

          this.loading = false
        })
      }else{
      countingDetail(code).then((response) => {
        // this.findLocations();
        // this.findShipments();
        let temp = JSON.parse(JSON.stringify(response.data));
        for (let keys in temp) {
          if (this.form.hasOwnProperty(keys)) {
            this.form[keys] = temp[keys];
          }
        }
        switch (temp.type) {
          case "1":
            this.showShipment = true;
            this.showLocation = false;
            this.showOpQuantity = false;
            this.form.type = "入驻商盘点";
            break;
          case "2":
            this.showLocation = true;
            this.showShipment = false;
            this.showOpQuantity = false;
            this.form.type = "库位盘点";
            break;
          case "3":
            this.showOpQuantity = true;
            this.showLocation = false;
            this.showShipment = false;
            this.form.type = "动碰盘点";
            break;
          default:
            this.showShipment = false;
            this.showLocation = false;
            this.showOpQuantity = false;
            this.form.type = "全盘";
            break;
        }
        this.tableData = temp.countingItemList;
        console.log(this.tableData);
        this.tableData.forEach((item)=>{

          item.inventoryQuantity = item.quantity;
        });
        console.log(this.tableData);
        this.loading = false;
      });

      }
    },

    formatterLock({ cellValue, row }) {
      row.lock = row.lockName;
      if (cellValue === 0) {
        return "否";
      } else if (cellValue === 1) {
        return "是";
      }
    },
    // 重置
    reset() {
      this.$refs["form"].resetFields();
    },

    // 取消
    funcCancel() {
      this.$emit("fatherCancelMethod", "add");
    },
    blurOpQuantity() {
      let params = {
        warehouseCode: this.form.warehouseCode,
        inventoryNumber: this.form.opQuantity,
      };
      this.listInventory(params);
    },
    listInventory(data) {
      request({
        url: "/wms/inventory/listInventory",
        method: "get",
        params: data,
      }).then((response) => {
        this.tableData = response.data;
      });
    },
    findShipments() {
      request({
        url: "/wms/warehouse/business/warehouse",
        method: "get",
      }).then((response) => {
        this.shipmentData = response.data;
        // 根据仓库code =>实际仓库名称 ；根据入驻商code => 入驻商名称
        let temp = this.shipmentData.filter((item) => {
          return item.code == this.form.warehouseCode;
        });
        let shipTemp =
          temp &&
          temp[0].shipmentVOList.filter((item) => {
            return item.shipmentCode == this.form.shipmentCode;
          });
        this.form.shipmentName =
          shipTemp && shipTemp[0] && shipTemp[0].shipmentName;
        this.form.name = temp && temp[0].name;
      });
    },
    findLocations() {
      request({
        url: "/wms/location/chooseData",
        method: "get",
      }).then((response) => {
        this.locationData = response.data;
        // 根据已有的form 位置编号   获取实际位置名称
        let temp = this.locationData.filter((item) => {
          return item.code == this.form.location;
        });
        this.form.locationName = temp && temp[0] && temp[0].serialNumber;
      });
    },
  },
};
</script>
<style lang="scss" scoped >
.dialog-footer {
  margin: 80px auto;
  width: 175px;
  // float: right;
}
</style>
